import React, { useState, useEffect } from 'react';
import { Icon, NavBar, Modal, List, Radio } from 'antd-mobile';
import { withRouter } from 'react-router-dom'
import { GetProducingApplies } from "@/api/tutor/orderList.js"

import "./refundSelect.scss"

const confirm = Modal.alert;
const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem;

/**
 * 退款选择
 * @param props
 * @constructor
 */
function RefundSelect (props) {
    let [userInfo] = useState(() => {
        let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        return userInfo
    });
    let [pendingList, setPendingList] = useState([]);  // 待定与正在教学 

    // 家教查看待定订单列表  【选中后等待家长确认订单】
    let handleGetProducingApplies = () => {
        let postData = {
            tutor_id: userInfo.id
        }

        GetProducingApplies(postData).then(res => {
            if (res.code == '000000') {
                setPendingList(res.responseData)
            }
        }).catch(err => {

        })
    }


    // 待定订单
    function handlePendingListFn (data) {
        return data.map((item, index) => {
            item._type = 'pending'; //  待定订单
            return (
                <Item
                    arrow="horizontal"
                    key={item.id}
                    multipleLine
                    onClick={() => {
                        props.history.push({
                            pathname: '/refundDetails',
                            data: item
                        })
                    }}
                    platform="android"
                >
                    {item.subjects}
                    <strong style={{ color: 'red', float: 'right' }}>{item.brokerage_fee}</strong>
                    <Brief>
                        工作时段: {item.learn_hours}
                        <br />
                        工作地址: {item.learn_address}
                        <br />
                        {item.demand}
                    </Brief>
                </Item>
            )
        })
    }



    useEffect(() => {
        handleGetProducingApplies();
    }, []);

    return (<div className="refund-select">
        <div className="page-title  refund-select-tit">
            <NavBar
                mode="light"
                icon={<Icon type="left" />}
                onLeftClick={() => {
                    props.history.goBack()
                }}
            >
                退款选择
                </NavBar>
        </div>

        <div className="page-content  refund-select-content">
            <div className="publish-content-piece">
                <List>
                    {handlePendingListFn(pendingList)}
                </List>
            </div>
        </div>

    </div>);
}

export default withRouter(RefundSelect);